<!--
 * @Description:选择模板文件，可删除
 * @Author: gaoyunpeng
 * @Date: 2022-01-21 17:19:14
 * @LastEditors: gaoyunpeng
-->
<template>
  <div class="tab-view">
    <div class="view-title">大屏可视化模板&中后台模板</div>
    <div class="view-content">
      <div class="tab-left" @click="$router.push('/')">中后台系统</div>
      <div class="tab-right" @click="$router.push('/layout-bigscreen')">
        大屏数据展示系统
      </div>
    </div>
    <bgAnimation></bgAnimation>
  </div>
</template>

<script>
import bgAnimation from '@/components/bgAnimation/index.vue'
export default {
  components: {
    bgAnimation
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.tab-view {
  width: 100%;
  height: 100%;
  background: url('~@/assets/images/login/t6.jpg') no-repeat;
  background-size: 100% 100%;
  .view-title {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 200px;
    @include font-color('special_text_color');
    font-size: 30px;
    z-index: 99999;
  }
  .view-content {
    display: flex;
    justify-content: center;
    position: relative;
    height: calc(100% - 200px);
    z-index: 99999;
    .tab-left,
    .tab-right {
      width: 600px;
      height: 200px;
      font-size: 32px;
      line-height: 200px;
      text-align: center;
      margin-right: 60px;
      @include font-color('normal_color');
      background-image: url('~@/assets/images/img/kuang.png');
      background-position: center center;
      background-repeat: no-repeat;
      background-color: transparent;
      background-size: contain;
      cursor: pointer;
      &:hover {
        @include font-color('hover_color');
        font-weight: 700;
      }
    }
  }
}
</style>
